
<script lang="ts" setup>
    import MobileNav from '@/components/mobile-ai/components/mobile-nav.vue'
    import { useRoute} from 'vue-router'
    import { Mobile_TOKEN_KEY} from "@/enums/CacheEnum";
    
    const route = useRoute()
    const Token = <string>localStorage.getItem(Mobile_TOKEN_KEY);
    const aiAnswer = ref(false);
    const displayText = ref('');
    // 调用回复接口 生成总结内容代码报错 自动补全
    initialization()
    function  initialization(){
        // 调用回复接口
        fetch(import.meta.env.VITE_APP_BASE_API + "/open/summary", {
            method: "POST",
            headers: {
                token: Token,
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                content: route.query.text,
                stream: true,
            }),
        }).then((response) => {
                aiAnswer.value = true;
                const reader = response.body.getReader();
                return new ReadableStream({
                    async start(controller) {
                        while (true) {
                            const { done, value } = await reader.read()
                            if (done) {
                                // 如果读取完成，关闭流
                                controller.close();
                                return;
                            }
                            displayText.value += new TextDecoder().decode(value);
                        }
                    },
                });
        }).then((stream) => {
                return new Response(stream).text();
        }).then((result) => {
                // disabledvalue.value = false;
        }).catch((error) => {
                console.error("Fetch error:", error);
        });
    }
    //
</script>

<template>
    <section class="h-full">
        <MobileNav :navname="'意图识别'"  />
        <div class="w-full h-full flex flex-col p-3">
            <div class="w-full">
                <div class="flex flex-col">
                    <div class="flex self-start items-center p-3.5">
                        <div class="w-11  mr-2.5">
                            <img src="/src/assets/images/AI_avatar.png" alt="" class="w-11  rounded">
                        </div>
                        <div class="answer pl-0.5 relative rounded-lg text-base ">
                            <div class="font-semibold">AI总结内容如下:</div>
                            <!-- <div class="answer-content flex" >
                                <span v-if="!aiAnswer">
                                    <img src="../../../assets/images/avatar/long.gif" alt="" class="w-5 h-5 mr-1">
                                    AI正在生成报表......
                                </span>
                                <span v-else >报表结果已经生成：</span>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full ">
                <div class="cneter-box p-3.5">
                    <span v-show="!aiAnswer" class="flex items-center">
                        <img src="../../../../assets/images/avatar/long.gif"alt="" class="w-5 h-5 mr-1">
                        AI正在总结......
                    </span>
                    <span v-show="aiAnswer">
                        {{ displayText }}
                    </span>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
    .answer{
        max-width: 85%;
        padding-top: 0;
        color: #606266;
    }
    .cneter-box{
        width: 100%;
        box-shadow: 0 12px 32px 4px #0000000a,0 8px 20px #00000014;
        background: #FFFFFF;
        border-radius: 6px;
    }
    .text-cneter{
        outline: none;
        border: none;
        resize: none;
        font-size: 15px;
        line-height: 25px;
        /* border-color: #545459; */
        display: block;
        box-sizing: border-box;
        font-family: PingFang SC;
        font-style: normal;
        scrollbar-width: none;
        outline-color: #545459;
        color:#1A2029;
    }
    .answer-content{
        background: #FFFFFF;
        /* font-size: 2px; */
        padding: 10px 15px;
        box-shadow: 0 0 20rpx rgba(153,153,153,.2);
        border-top-left-radius: 2px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        word-break: break-all;
    }
</style>